<template>
	<div id="">
		<div id="" style="width: 100vw;text-align: left;">
			<h3 style="margin-left: 3vw;font-size: 0.4rem;">新品上市</h3>
		</div>
		<div class="newshop">
			<div id="box_item" v-for="item in list"
				@click="$router.push({path:'/details',query:{goods_id:item.goods_id}})">
				<div id="" style="margin-left: 3vw;"><img v-lazy="url+item.original_img"
						style="width: 40vw;height: 25vh;"></div>
				<div id="wen">{{item.goods_name}}</div>
				<div id="" style="color: red;font-size: 0.4rem;"><span
						style="font-size: 0.1rem;">￥</span>{{item.shop_price}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters([
				'vuexNew'
			])
		},
		props: {
			list: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				url: ''
			}
		},
		created() {
			this.$store.dispatch('user/vuexUrl', '地址')
				.then(e => {
					this.url = e
					console.log(e)
				})
		}
	}
</script>

<style>
	.newshop {
		display: flex;
		overflow: hidden;
		overflow-x: scroll;
		margin-top: 2vh;
		font-size: 0.4rem;
		text-align: left;
	}

	.newshop::-webkit-scrollbar {
		display: none;
	}

	.newshop #box_item {
		width: 45vw;
		height: 36vh;
		display: inline-block;
		border-radius: 10px;
		box-shadow: 2px 2px 2px 2px #f1f1f1;
		/* margin-top: 1vw; */
		margin-left: 2vw;
	}

	#wen {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 1vh;
		/* margin-left: 4vw; */
		width: 45vw;
		font-size: 0.3rem;
		text-align: left;
	}
</style>
